var Slide=function(){
	self=this;
//	容器
	this.div=document.getElementById('container');
//	子盒子(要滚动的盒子)
	this.article=document.getElementsByTagName('article')[0];
//	要滚动的屏幕数量
	this.num=this.article.children.length;
//	当前拖动的页面 下标
	this.index=0;
//	点击下一个
	this.up=document.getElementById('next');
//	音乐播放暂停
	this.music=document.getElementById('music');
	this.run=function(){
		document.getElementsByTagName('html')[0].style.fontSize=window.screen.height+'px';
		this.article.style.height=2*this.num+"rem";
//		复制一份article里面的内容
		this.article.innerHTML+=this.article.innerHTML;
//		阻止手机默认行为
		document.addEventListener('touchmove',function(e){e.preventDefault()},false);
//		给按钮绑定下一个事件
		this.up.addEventListener('touchstart',this.next,false);
//		音乐绑定
		this.music.addEventListener('touchstart',this.auto,false);
	}
	this.auto=function(e){
		var audios=document.getElementsByTagName('audio')[0];
//		如果是暂停播放
		if(audios.paused){
			self.music.className="";
			audios.play();
		}else{
			self.music.className="stop";
			audios.pause();
		}
	}

	this.next=function(e){
//		移除上一个滚动过来的class
		self.removeClass();
		self.index++;
		self.moveLen=-screen.height*self.index;
//		如果滑动到了最后一个
		if(self.index==self.num){
			self.css(self.article,self.moveLen,500,function(){
				self.index=self.index%self.num;
				self.moveLen=-self.index*screen.height;
				self.css(self.article,self.moveLen,0);
			});
			self.index=0;
		}else{
			self.css(self.article,self.moveLen,500);
		}
//		添加样式	
		self.addClass();
		
	}
//	移除上一屏幕的class
	this.removeClass=function(i){
		var index =i || self.index; 
		var old=document.getElementsByTagName('section')[index];
	    for(var i=0; i<old.children.length;i++){
		    old.children[i].className='';
	    }
	}
//	给滚动到的当前屏幕添加样式
	this.addClass=function(i){
		var index =i || self.index; 
		var section=document.getElementsByTagName('section')[index];
		var one =section.children;
	    for(var i=0; i<one.length;i++){
		    one[i].className= one[i].getAttribute('data-class');
		    one[i].style.animationDelay=500*i+"ms";
	    } 
	}
//	滑动
	this.slide=function(){
//		第一次向下滚动的时候 self.index=4 self.index=self.index-n = 5
		if(self.index>=self.num){
//			先让他滚动到第二组的第二个  再瞬间变成第一组的第二个
			self.css(self.article,self.moveLen,300,function(){
				self.index=self.index%self.num;
				self.moveLen=-self.index*screen.height;
				self.css(self.article,self.moveLen,0);
			})
		}else{
			self.css(self.article,self.moveLen,300);
		}
	}
//	滚动样式
	this.css=function(obj,len,duration,callback){
//		设置动画时间
		obj.style.transitionDuration=duration+"ms";
		obj.style.transform="translateY("+len+"px)";
//		如果有回调函数
		if(callback){
			setTimeout(function(){
				callback();
			},duration);
		}
	}
}
window.onload=function(){
	obj=new Slide();
	obj.run();
	var section = document.getElementsByTagName('section')[0];
	var one =section.children;
	var data=[];
	for(var i=0; i<one.length;i++){
		data[i] = one[i].getAttribute('data-class');
		one[i].style.animationDelay=500*i+"ms";
		one[i].className = data[i];
	}
	
}
